<template>
    <view class="pageContainer">
        <image :src="activityObj.cover" class="activityItem" mode="widthFix"></image>  
        <titleBlock :detailobj="activityObj"></titleBlock>  
 
        <view v-if="activityObj.presents&&activityObj.presents.length>0" class="couponContainer">    
            <view class="header">
                <view class="left">
                    <image class="icon" src="../static/image/icon_lipin.png" mode=""></image>
                    奖品区
                </view>
                <view class="right" @click="onAttendActivity">
                    我的奖品
                </view>
            </view>
            
            <view class="couponWrapper">
                <image class="left" src="/pages/client/static/image/icon_daijinquan.png" mode=""></image>
                <view class="middle"> 
                </view>
                <view class="right">
                    {{activityObj.presents[0].title}}
                </view>
            </view>        
        </view>

        <view class="progressContainer">
            <view class="title">
                活动参与情况
            </view>
            
           <view class="tip">
                已砍
                <text class="text">{{percentCss.width}}</text>                
                ,继续加油
            </view>

            <view class="progress">
                <view class="percent" :style="[percentCss]">
                    
                </view>
                <view v-for="i in 5" class="dot" :style="{left:(100*i+103) +'rpx'}" :key="i">
                    
                </view>
            </view>
            
            <view class="num">
                <view v-for="i in 4" class="text" :class="{text1:(i!=0)}" :key="i">                  
                    {{(20+i*20)}}%
                </view>
                <view class="text text1 text2">
                    100%
                </view>
            </view>
            
            <view class="btnWrapper">
                <view @click="onAttendActivity" class="shareBtn">
                    邀请好友砍一刀
                </view>
            </view>
            
            <view class="avatarContainer">
                <view v-for="(item,index) in attendList" class="item" :key="index">
                    <image class="avatar" :src="item.avatar" mode=""></image>
                    <view class="tag">
                        {{cutPercent}}
                    </view>
                </view>
            </view>
        </view>

 
        <view class="" style="width: 750rpx;margin-top: 30rpx;">
            <u-parse :html="activityObj.intro"></u-parse>
        </view>
        
        <view class="" style="height: 150rpx;">
            
        </view>
        <awardBlock v-model="isShowAwardPopup" 
            :activityId="activityId" :activityType="'6'">
        </awardBlock>
        
        <share-button v-if="activityObj.startTime&&activityObj.startTime.length>0"
			@onShare="onShare"
        ></share-button>
    </view>
</template>

<script>
    const api = require('@/static/js/api.js')
    const utils = require("@/static/js/utils.js")


    
    import titleBlock from "@/pages/shop/components/activityBlock/titleBlock/index.vue"
    import awardBlock from "@/pages/shop/components/activityBlock/awardBlock/index.vue"
    import {
        mapState,
        mapMutations,
        mapActions,
        mapGetters
    } from 'vuex';
    let that = null
    export default {
        components: {
            titleBlock,
            awardBlock
        },
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
                isSeller: state => state.userInfo.isSeller,
                isReferrer: state => state.userInfo.isReferrer,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        data() {

            return {
                pageInit: false,
                isShowAwardPopup: false,
                isShowDelay: false,
                cutDownObj:{
                    isShow: false,
                    image: '',
                    hasAttend: false,
                },
                resultObj:{
                    cashAward: '',
                    isShow: false,
                },
                rulerNode: "",
                activityDuty: "",
                awardList: [],
                percentCss: {
                    width: '0%'
                },
                
                activityObj: {
                    name: "",
                    activityStatusName: "",
                    startTime: "",
                    endTime: "",
                    intro: "",
                    award:{
                        title:'',
                    },
                    attend:false
                },
                attendList:[],
                cutPercent: '',
                activityId: "",
                parentLogId: '',
            }
        },
        onLoad(options) {
            that = this
         
            if (options.id) {
                this.activityId = options.id
            }
            
            if (options.logId) {
                this.parentLogId = options.logId;
            }
            
            if (options.logId){
                this.getParentActivityDetail()
            }      
        },
        onShow() {
            this.getActivityDetail()     
        },

        methods: {
            getParentActivityDetail() {
                let that = this
                api.getActivityDetail({
                    param: {
                        id: that.activityId,
                        cutAttendId: that.parentLogId,
                    }
                }).then(res => {
                    console.log(res)
                                      
                    if (res.success) {
                        //===上级是否有权限参加
                        if (res.data.attendPermit){                           
                            if (res.data.attendInfo){
                                that.cutDownObj.hasAttend = !res.data.attendInfo.isEnabled
                                that.cutDownObj.image = res.data.activityInfo&&res.data.activityInfo.popupImage||'';
                                that.cutDownObj.isShow = true;    
                            }                  	                          
                        }
                    }                   
                })
            },
            
            getActivityDetail() {
                let that = this
                api.getActivityDetail({
                    param: {
                        id: this.activityId ,
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success) {
                        res.data.activityInfo.intro = res.data.activityInfo.intro || "";
                        res.data.activityInfo.startTimeFormat = utils.formatTime(res.data.activityInfo.startTime,
                            'yyyy年MM月dd日') + utils.formatTime(res.data.activityInfo.startTime,
                            'hh-mm')
                        res.data.activityInfo.endTimeFormat = utils.formatTime(res.data.activityInfo.endTime,
                            'yyyy年MM月dd日') + utils.formatTime(res.data.activityInfo.endTime,
                            'hh-mm')
                            
                        if (res.data.attendInfo){
                            if (res.data.attendInfo&&res.data.attendInfo.percent){
                                that.percentCss.width = (parseFloat(res.data.attendInfo.percent)*100).toFixed(2) + '%'
                            }else{
                                that.percentCss.width = '0%'
                            }
                            if (res.data.activityInfo&&res.data.activityInfo.minCut){
                                that.cutPercent = (100/res.data.activityInfo.minCut).toFixed(2)+'%'
                                that.attendList.splice(0, that.attendList.length)
                                for (var i=0; i < res.data.activityInfo.minCut; i++){
                                    var obj = {
                                        avatar:'../static/image/add.png',
                                    }
                                    if (res.data.attendInfo.list&&res.data.attendInfo.list[i]){
                                        obj.avatar = res.data.attendInfo.list[i].avatar;
                                    }
                                    that.attendList.push(obj);                  
                               } 
                            }                    
                        }else{
                            that.percentCss.width = '0%'
                            that.attendActivity();
                        }
  
                        that.activityObj = res.data.activityInfo;
	
                         
						that.shareTitleMixins = that.activityObj.shareInfo;
						that.shareImageMixins = that.activityObj.shareImage;
                        
                        if (!that.pageInit && that.activityObj.popupImage&&(that.parentLogId.length==0)){
                            that.isShowDelay = true;
                        }  
                        that.pageInit = true;                      
                    }
                })
            },
            onCloseCutDown(){
                that.cutDownObj.isShow = false
            },
            onCloseResult(){
                that.resultObj.isShow = false
            },
            onAttendActivity(){
                uni.showModal({
                    title: '提示',
                    content: '工作台不能参加活动，请到"在线看房"中，参加活动！',
                    showCancel: false,
                    success: function(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            
            attendActivity(){
                api.attendActivity({
                    id: that.activityId
                }).then(res=>{
                    console.log(res)
                    if (res.success) {
                        that.getActivityDetail();
                    } else{

                    }   
                })
            },
            
            helpCutActivity(){
                if (that.cutDownObj.hasAttend) {
                    uni.showToast({
                        icon:'none',
                        title:'你已参加过该好友的活动！',
                        duration: 3000,
                    })
                    that.cutDownObj.isShow = false
                    return;
                }
                api.helpCutActivity({
                    id: that.parentLogId
                }).then(res=>{
                    console.log(res)
                    if (res.success) {
                        that.cutDownObj.isShow = false
                        if (res.data.cashAward){
                            that.resultObj.cashAward = res.data.cashAward
                        }
                        that.resultObj.isShow = true
                    } else{
                        that.cutDownObj.isShow = false
                        uni.showModal({
                            title: '提示',
                            content: res.message,
                            showCancel: false,
                            success: function(res) {
                                if (res.confirm) {
                                    console.log('用户点击确定');
                                } else if (res.cancel) {
                                    console.log('用户点击取消');
                                }
                            }
                        });
                    }   
                })
            },
            
            gotoCurrentActivityAward() {
                console.log("gotoCurrentActivityAward")
                that.isShowAwardPopup = true
                // uni.navigateTo({
                //     url: './activityAward?id=' + this.activityId + "&type=6"
                // })
            },
            
        }    
        
    }
</script>

<style lang="scss">
    page {
        background-color: #F6373a;
    }

    .pageContainer {
        width: 750rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        background-color: #F6373a;
    }

    .activityItem {
        width: 750rpx;
    }
    .couponContainer{
        width: 714rpx;
        // height: 252rpx;
        background: #FEF8E9;
        // box-shadow: 2rpx 2rpx 8rpx 4rpx #E7E7E7;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30rpx;
        margin-top: 30rpx;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            width: 100%;
            .left {
                display: flex;
                align-items: center;
                font-size: 34rpx;
                color: #333333;
        
                .icon {
                    width: 50rpx;
                    height: 50rpx;
                    margin-right: 16rpx;
                }
            }
        
            .right {
                width: 160rpx;
                height: 48rpx;
                // background-image: linear-gradient(90deg,
                //         #fe9b29 0%,
                //         #fe8926 100%);
                background: linear-gradient(180deg, #FE551E 0%, #FF8613 100%, #FFE38C 100%);
                border-radius: 24rpx;
                font-size: 26rpx;
                color: #ffffff;
                line-height: 48rpx;
                text-align: center;
            }
        }
        .couponWrapper{
            width: 570rpx;
            height: 116rpx;
            background: linear-gradient(180deg, #FE551E 0%, #FF8613 100%, #FFE38C 100%);
            // box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
            border-radius: 20rpx;
            display: flex;

            align-items: center;
            justify-content: space-between;
            .left{
                width: 80rpx;
                height: 80rpx;
                margin-left: 23rpx;
                margin-right: 23rpx;
            }
            .middle{
                height: 116rpx;
                width: 0;
                border-left: 1px #FFFFFF dashed;
            }
            .right{
                width: 440rpx;
                text-align: center;
                font-size: 32rpx;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 56rpx
            }
        }

    }

    .progressContainer{
        width: 714rpx;
        // height: 328rpx;
        background: #FFFFFF;
        // box-shadow: 2rpx 2rpx 8rpx 4rpx #E7E7E7;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30rpx;
        margin-top: 65rpx;
        position: relative;
        .title{
            position: absolute;
            top: -35rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 317rpx;
            height: 70rpx;
            font-size: 28rpx;
            line-height: 70rpx;
            letter-spacing: 1rpx;
            color: #fefefe;
            text-align: center;
            background-size: 100% 100%;
            background-image: url(../static/image/icon_bg_title.png);
        }
        .tip{
            margin-top: 30rpx;
            font-size: 22rpx;
            line-height: 40rpx;
            color: #3a2b27;
            margin-bottom: 20rpx;
            .text{
                color: #F6373a;
                font-size: 28rpx;
                margin-left: 10rpx;
                margin-right: 10rpx;
            }
        }
        .progress{
           	width: 526rpx;
           	height: 20rpx;
           	background-color: #c9c9c9;
           	box-shadow: 1rpx 2rpx 5rpx 0rpx 
           		rgba(1, 1, 1, 0.4);
           	border-radius: 10rpx;
            overflow: hidden;
            margin-bottom: 8rpx;
            position: relative;
            .percent{
                height: 100%;
                width: 0;
                background-image: linear-gradient(90deg, 
                		#f1973f 0%, 
                		#f12b22 100%);
                	box-shadow: 1rpx 2rpx 5rpx 0rpx 
                		rgba(1, 1, 1, 0.4);
                border-radius: 10rpx;
            }
            .dot{
                width: 14rpx;
                height: 14rpx;
                background-color: #fbf3d8;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        
        .num{
            width: 526rpx;
            display: flex;
            .text{
                font-size: 20rpx;
                font-weight: normal;
                font-stretch: normal;
                line-height: 20rpx;
                letter-spacing: 0rpx;
                color: #3a2b27;
                margin-left: 94rpx;
            }
            .text1{
                margin-left: 59rpx;
            }
            .text2{
                font-size: 24rpx;
                color: #d61608;
            }
        }
        
        .btnWrapper{
            display: flex;
            justify-content: center;
            margin-top: 30rpx;
            margin-bottom: 30rpx ;
            .shareBtn{
                width: 299rpx;
                height: 72rpx;
                background: #F6784C;
                border-radius: 40rpx;
                line-height: 72rpx;
                text-align: center;
                color: #FFFFFF;
                font-size: 28rpx;
            }
            .detailBtn{
                width: 210rpx;
                height: 72rpx;
                border-radius: 40rpx;
                border: 1px solid #BBBABA;
                margin-left: 77rpx;
                line-height: 72rpx;
                text-align: center;
                color: #333333;
                font-size: 28rpx;
                
            }
            .btn{
                width: 350rpx;
                height: 72rpx;
                background: #F6784C;
                border-radius: 40rpx;
                text-align: center;
                color: #FFFFFF;
                font-size: 28rpx;
                line-height: 72rpx;
            }
        }
        .avatarContainer{
            width: 590rpx;
            // height: 192rpx;
            display: flex;
            flex-wrap: wrap;
            .item{
                width: 84rpx;
                height: 88rpx;
                position: relative;
                margin: 10rpx 17rpx;
                .avatar{
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    margin-left: 7rpx;
                    // background-color: #F3F3F3;
                }
                .tag{
                    width: 84rpx;
                    height: 26rpx;
                    background-image: linear-gradient(0deg, 
                        #fe5f42 0%, 
                        #f12b22 100%);
                    box-shadow: 1rpx 2rpx 5rpx 0rpx 
                        rgba(1, 1, 1, 0.4);
                    border-radius: 13rpx;
                    text-align: center;
                    line-height: 26rpx;
                    font-size: 18rpx;
                    letter-spacing: 1rpx;
                    color: #fefefe;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                }
            }
        }
    }


    .ruler {
        width: 714rpx;
        background: #FFFFFF;
        // box-shadow: 2rpx 2rpx 2rpx 1rpx #FFFFFF;
        border-radius: 31rpx;
        padding: 30rpx;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        .title{
            font-size: 30rpx;
            color: #000000;
        }
        .text{
            margin-left: 30rpx;
            width: 600rpx;
            margin-top: 20rpx;
            margin-bottom: 30rpx;
            font-size: 24rpx;
            color: #333333;
            line-height: 33rpx;
        }
    }

    .award {
        width: 714rpx;
        padding: 30rpx 0;
        background: linear-gradient(180deg, #FE551E 0%, #FF8613 100%, #FFE38C 100%);
        // box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        margin-top: 30rpx;

        .item {
            width: 690rpx;
            height: 128rpx;
            background: #FFFFFF;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            margin-left: 12rpx;
            margin-top: 24rpx;

            .left {
                width: 88rpx;
                height: 88rpx;
                margin-left: 20rpx;
            }

            .middle {
                color: #333333;
                font-size: 28rpx;
                max-width: 300rpx;
                margin-left: 30rpx;
            }
        }
    }


    .bottomContainer2 {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 750rpx;
        height: 122rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: #F3F3F3 1px solid;
        box-sizing: content-box;
        padding-bottom: env(safe-area-inset-bottom);
        .attendBtn{
            width: 400rpx;
            height: 74rpx;
            background: #F6784C;
            border-radius: 37rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            line-height: 74rpx;
            z-index: 99999;
        }
        

        .left{
            width: 302rpx;
            height: 74rpx;
            background: #F6784C;
            border-radius: 37rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            line-height: 74rpx;
            font-size: 28rpx;
            z-index: 99999;
            margin-right: 84rpx;
            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 24rpx;
            }
        }    
        .right{
            width: 260rpx;
            height: 74rpx;
            background: #5E9FFD;
            border-radius: 37rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            line-height: 74rpx;
            z-index: 99999;
            .icon {
                width: 40rpx;
                height: 40rpx;
                margin-right: 24rpx;
            }
        }  
    }
    
    .cutDownContainer{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        .image{
            width: 550rpx;
        }
        .closeWrapper{
            margin-top: 30rpx;
            width: 70rpx;
            height: 70rpx;
        }
        .btn{
            width: 324rpx;
            height: 64rpx;
            
            // background: linear-gradient(180deg, #FE551E 0%, #FF8613 100%, #FFE38C 100%);
            // box-shadow: 1px 1px 1px 1px #EEEEEE;
            // border-radius: 32rpx;
            
            text-align: center;
            line-height: 64rpx;
            color: #FFFFFF;
            position: absolute;
            bottom: 130rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .resultContainer{
        width: 580rpx;
        height: 532rpx;
        background-size: 100% 100%;
        background-image: url(https://etalk.obs.cn-south-1.myhuaweicloud.com/popup_bg_red.png);
        display: flex;
        flex-direction: column;
        align-items: center;
        .wrapper{
            width: 100%;
            height: 330rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 40rpx;
            .title{
                font-size: 34rpx;
                line-height: 54rpx;
                letter-spacing: 3rpx;
                color: #3a2b27;
                font-weight: bold;
            }
            .redPacket{
                font-size: 76rpx;
                font-weight: normal;
                font-stretch: normal;
                line-height: 114rpx;
                letter-spacing: 0rpx;
                color: #d61608;
                font-weight: bold;
                .text{
                    font-size: 30rpx;
                    font-weight: normal;
                    font-stretch: normal;
                    letter-spacing: 3rpx;
                    color: #d61608;
                    font-weight: bold;
                }
            }

        }
        .btn{
            width: 316rpx;
            height: 70rpx;
            background-image: linear-gradient(0deg, 
                #fda204 0%, 
                #feb705 10%, 
                #ffcc05 47%, 
                #ffde43 66%, 
                #fef081 95%), 
            linear-gradient(
                #ffcb05, 
                #ffcb05);
            background-blend-mode: normal, 
                normal;
            border-style: solid;
            border-width: 4rpx;
            border-image-source: linear-gradient(0deg, 
                #dc6700 0%, 
                #f8d62c 100%);
            border-image-slice: 1;
            
            font-size: 30rpx;
            font-weight: normal;
            font-stretch: normal;
            line-height: 63rpx;
            letter-spacing: 1rpx;
            color: #3a2b27;
            text-align: center;
            margin-top: 20rpx;
            border-radius: 35rpx;
            font-weight: bold;
        }
        .tip{
            font-size: 20rpx;
            line-height: 36rpx;
            letter-spacing: 2rpx;
            color: #fefefe;
            opacity: 0.8;
            margin-top: 10rpx;
        }
    
    }
</style>
